<template>
  <transition name="fade">
    <div class="wrap">
      <div class="head">
        <img :src="userIcon" alt="">
        <div>
          <p>昵称:{{name}}</p>
          <p>积分:{{score}}</p>
        </div>
        <p v-if="name" @click="toAdmin">账户管理</p>
        <p v-if="!name" @click="go_login">登录</p>
      </div>
      <div class="order_wrap">
         <ul>
           <li @click="toOrderList(0)">
             <div>
               <span v-if="daifukuan_n>0">{{daifukuan_n}}</span>
               <img src="../assets/img/daifukuan.png" alt="">
             </div>
             <p>待付款</p>
           </li>
           <li  @click="toOrderList(1)">
             <div>
               <span v-if="daifahuo_n>0">{{daifahuo_n}}</span>
               <img src="../assets/img/daifahuo.png" alt="">
             </div>
             <p>待发货</p>
           </li>
           <li  @click="toOrderList(2)">
             <div>
               <span v-if="daishouhuo_n>0">{{daishouhuo_n}}</span>
               <img src="../assets/img/daishouhuo.png" alt="">
             </div>
             <p>待收货</p>
           </li>
           <li  @click="toOrderList(4)">
             <div>
               <img style="background-color:#039ce8" src="../assets/img/daipingjia.png" alt="">
             </div>
             <p>待评价</p>
           </li>
           <li @click="toMyOrders">
             <div>
               <img src="../assets/img/myorder.png" alt="">
             </div>
             <p>我的订单</p>
           </li>
         </ul>
      </div>
      <div class="select_wrap">
        <ul>
          <li>
            <div>
              <img src="../assets/img/fenxiang.png" alt="">
            </div>
            <span>分享有礼</span><b></b>
          </li>
          <li>
            <div>
              <img src="../assets/img/liquan.png" alt="">
            </div>
            <span>我的礼券</span><b></b>
          </li>
          <li>
            <div>
              <img src="../assets/img/jifen.png" alt="">
            </div>
            <span>积分兑换</span><b></b>
          </li>
           <li>
             <div>
               <img src="../assets/img/paizhao.png" alt="">
             </div>
             <span>拍照记录</span><b></b>
           </li>
           <li>
             <div>
               <img src="../assets/img/wenti.png" alt="">
             </div>
             <span>问题反馈</span><b></b>
           </li>
           <li>
             <div>
               <img src="../assets/img/fuwu.png" alt="">
             </div>
             <span>服务政策</span><b></b>
           </li>
           <li>
             <div>
               <img src="../assets/img/guanyu.png" alt="">
             </div>
             <span>关于铭材</span><b></b>
           </li>
           <li style="border-bottom: none">
             <div>
               <img src="../assets/img/lianxi.png" alt="">
             </div>
             <span>联系客服</span><b></b>
           </li>
         </ul>
      </div>
    </div>
  </transition>
</template>

<script>
  import {get_car_number} from 'api/shop_car'
  import {get_cookie} from 'assets/cookie/cookie'
  import {mapMutations} from 'vuex'
    export default {
        name: "my",
      data(){
          return{
            name:'',
            daifukuan_n:0,
            daifahuo_n:0,
            daishouhuo_n:0,
            score:0,
            title:'',
            order_type:'',
            userIcon:require('../assets/img/man.png')
          }
      },
      activated(){
        this.get_car_number()
      },
      computed:{
      },
      components:{

      },
      methods:{
        toOrderList(n){
          this.order_type=n
          this.$router.push({
            path: "/myOrder",
            query: {
             type:""+n
            }
          })

        },
        toMyOrders(){
          this.$router.push('/myOrders')
        },
        toAdmin(){
          this.$router.push('/admin')
        },
        get_car_number(){
          get_car_number({
            token:get_cookie('key')
          }).then((res)=>{
            console.log(res)
            if(res.status===200&&res.data.resStatus===0){
                 this.name=res.data.data[0]['no-user']
                 this.score=res.data.data[0]['no-score']
                 this.daifahuo_n=res.data.data[0]['no-delivery']
                 this.daifukuan_n=res.data.data[0]['no-pay']
                this.daishouhuo_n=res.data.data[0]['no-accept']
                this.userIcon=res.data.data[0]['userIcon']?res.data.data[0]['userIcon']:require('../assets/img/man.png')
              this.setCarNumber(res.data.data[0]['no-cart'])
            }
          })
        },
        go_login(){
          this.setIsLogin(false)
        },
        ...mapMutations({
          setIsLogin: 'SET_IS_LOGIN',
          setCarNumber: 'SET_CAR_NUMBER',
        })
      }
    }
</script>

<style scoped lang="scss">
   .wrap{
    padding-bottom: 60px;
   }
   .head{
     height: 80px;
     background: #019fe8;
     padding-top: 1px;
      >img{
        width: 60px;
        height: 60px;
        float: left;
        margin-left: 16px;
        margin-top: 10px;
        border-radius: 50%;
        background-color: #ddd;
      }
     >div{
       float: left;
       height: 100%;
       padding-top: 18px;
       margin-left: 12px;
       text-align: left;
       font-size: 14px;
       >p{
         margin-top: 5px;
         color: #fff;
         letter-spacing: 0.8px;
       }
     }
     >p{
       color: #fff;
       float: right;
       height: 80px;
       line-height: 80px;
       margin-right: 24px;
       font-size: 14px;
       padding-left: 10px;
       padding-right: 10px;
     }
     }
  .order_wrap{
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    >ul{
      overflow: hidden;
      >li{
        width: 20%;
        float: left;
        padding-top: 9px;
        >div{
          width: 40px;
          margin: 0 auto;
          height: 40px;
          line-height: 40px;
          position: relative;
          >span{
            position: absolute;
            width: 22px;
            height: 22px;
            top: -8px;
            right: -12px;
            background-color: #f10;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 23px;
            letter-spacing: 0;
            font-weight:500;
          }
          >img{
            display: inline-block;
            width: 100%;
          }
        }
        >p{
          margin-top: 8px;
          color: #999;
        }
      }
    }
  }
  .select_wrap{
    >ul{
      >li{
        line-height: 48px;
        height: 48px;
        border-bottom: 1px solid #ddd;
        >div{
          float: left;
          width: 40px;
          height: 48px;
          margin-left: 10px;
          >img{
            display: inline-block;
            width: 20px;
          }
        }

        >span{
          float: left;
          height: 100%;
          margin-left: 5px;
          font-size: 14px;
        }
      }
    }

  }
   .fade-enter-active /* .fade-leave-active below version 2.1.8 */
   {
     opacity: 0;
   }

   .fade-enter-to /* .fade-leave-active below version 2.1.8 */
   {
     opacity: 1;
     transition: all .5s;
   }
</style>
